@import "../../../styles//variable";
$metric-prefix-cls: #{$prefix}-metric;

.#{$metric-prefix-cls}-panel {
  display: flex;
  height: 100%;

  .#{$metric-prefix-cls}-item {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    text-align: center;

    &:not(:last-child)::after {
      position: absolute;
      top: calc(50% - 20px);
      right: 0;
      width: 1px;
      height: 40px;
      background: rgba(0, 0, 0, 0.1);
      content: "";
    }

    .#{$metric-prefix-cls}-value {
      margin-bottom: 8px;
      font-weight: 500;
      font-size: 24px;
    }

    .#{$metric-prefix-cls}-name {
      color: rgba(0, 0, 0, 0.4);
      font-size: 14px;
    }
  }
}
